<template>
  <div>
    <!-- 面包屑 -->
    <bread-view>
      <bread-item :to="'/'">首页</bread-item>
      <bread-item :to="`/cate?id=${breadobj.onecateid}`">{{
        breadobj.onecatename
      }}</bread-item>
      <bread-item>{{ breadobj.twocatename }}</bread-item>
    </bread-view>
    <!-- 属性展示区 -->
    <div class="sub-filter" v-if="attr.length != 0">
      <div class="item">
        <div class="head">品牌：</div>
        <div class="body">
          <a
            href="javascript:;"
            :class="{ active: item.id == brandid }"
            v-for="item in brandattr"
            :key="item.id"
            @click="setBrand(item.id)"
            >{{ item.name }}</a
          >
        </div>
      </div>
      <div class="item" v-for="(item, key) in attr" :key="item.id">
        <div class="head">{{ item.name }}</div>
        <div class="body">
          <a
            href="javascript:;"
            v-for="it in item.properties"
            :key="it.id"
            :class="{ active: changeattr[key] && it.id == changeattr[key].id }"
            @click="setchangeattr(key, item.name, it.name, it.id)"
            >{{ it.name }}</a
          >
        </div>
      </div>
    </div>
    <div class="sub-filter" v-if="attr.length == 0">
      <SkeleonView width="800px" height="20px"></SkeleonView>
      <SkeleonView width="600px" height="20px"></SkeleonView>
      <SkeleonView width="600px" height="20px"></SkeleonView>
      <SkeleonView width="600px" height="20px"></SkeleonView>
      <SkeleonView width="600px" height="20px"></SkeleonView>
    </div>
    {{ sortField }}--{{ sortMethod }}
    <!-- 排序展示区 -->
    <div class="sortview">
      <div class="left">
        <div class="sortarea">
          <section v-for="(item, key) in radioarea" :key="key">
            <input
              type="radio"
              name="sortarea"
              :value="item.val"
              v-model="sortField"
              :id="key"
              @click="sortMethod = null"
            />
            <label :for="key">{{ item.name }}</label>
          </section>
        </div>
        <div class="pricearea">
          <span class="pricesort" @click="setPriceSort()">
            价格排序
            <i class="arrow up" :class="{ active: sortMethod == 'asc' }" />
            <i class="arrow down" :class="{ active: sortMethod == 'desc' }" />
          </span>
        </div>
      </div>
      <div class="right">
        <check-box :val.sync="inventory" :title="'have'"
          >仅显示有货商品</check-box
        >
        <check-box :val.sync="onlyDiscount" :title="'cheap'"
          >仅显示特惠商品</check-box
        >
      </div>
    </div>
    <!-- 结果展示区 -->
    <div class="goodsdata">
      <goods-item
        v-for="item in goodslist"
        :key="item.id"
        :it="item"
        @click.native="$router.push('/detail?id='+item.id)"
      ></goods-item>
    </div>
    <!-- 监控加载盒子 -->
    <infinite-loading
      :finished="finished"
      :loading="loading"
      @getdata="getData"
    ></infinite-loading>
  </div>
</template>
<script>
import BreadView from "../bread/breadview.vue";
import BreadItem from "../bread/breaditem.vue";
import SkeleonView from "../../utils/SkeletonView.vue";
import { cateFilter, getGoods } from "../../utils/Api/NavText";
import CheckBox from "./CheckBox.vue";
import GoodsItem from "@/components/category/xifen.vue";
import InfiniteLoading from "./InfineteLoading.vue";
export default {
  components: {
    BreadView,
    BreadItem,
    SkeleonView,
    CheckBox,
    GoodsItem,
    InfiniteLoading,
  },
  data() {
    return {
      //面包屑
      breadobj: {
        twocatename: null,
        onecatename: null,
        onecateid: null,
      },
      //选择品牌
      brandattr: [],
      //属性
      attr: [],
      //排序按钮组的数据
      radioarea: [
        { val: "", name: "默认排序" },
        { val: "publishTime", name: "最新商品" },
        { val: "orderNum", name: "最该人气" },
        { val: "evaluateNum", name: "评论最多" },
      ],
      sortField: "", //点的哪个排序
      sortMethod: "", //排序方式
      inventory: false, //是否有库存
      onlyDiscount: false, //是否显示特惠
      loading: false, //正在加载中
      finished: false, //是否已经加载完成
      query: {
        categoryId: null,
        page: 1,
        pageSize: 20,
      },
      goodslist: [],
      brandid: null, //当前选中的品牌id
      changeattr: [],
    };
  },
  computed: {
    cate() {
      return this.$store.state.nav.navigation;
    },
  },
  mounted() {
    //给query赋值
    this.query.categoryId = this.$route.query.id;
    //调用属性获取的方法
    //this.getData()
  },
  watch: {
    $route: {
      async handler(val) {
        if (val) {
          this.setBread();
          await this.getAttr(this.$route.query.id);
          //设置选择的数组
          var obj = { groupName: null, propertyName: null, id: null };
          this.changeattr = [];
          //遍历attr的数组
          for (var i = 0; i < this.attr.length; i++) {
            this.changeattr.push(obj);
          }
          console.log(this.changeattr);
        }
      },
      deep: true,
      immediate: true,
    },
    //监听属性选择
    changeattr(val) {
      //过滤出id为null的数据不发请求
      var attr = val.filter((item) => {
        return item.id != null;
      });
      //连接this.query发请求
      this.query = { ...this.query, ...{ attr } };
      this.goodslist = [];
      if (attr.length != 0) {
        this.getData();
      }
    },
    //检测排序方式的变化
    sortField(val) {
      //设置条件
      if (val == "price") {
        this.query.sortField = val;
        this.query.sortMethod = this.sortMethod;
      } else {
        this.query.sortField = val;
        this.query.sortMethod = null;
      }
      //设置成第一页
      //请求数据
      this.resetgetdata();
    },
    //价格监听  val  oldval
    sortMethod(val, oldval) {
      //从desc  或者 asc 变成空的时候不发请求
      if (val == null) {
        return false;
      }
      //从空 到desc的时候在前面已经发过请求  可以不发请求
      if (oldval != null) {
        this.query.sortMethod = val;
        this.resetgetdata();
      }
    },
    //有没有货
    onlyDiscount(val) {
      this.query.onlyDiscount = val;
      this.resetgetdata();
    },
  },
  methods: {
    //重置请求参数
    resetgetdata() {
      this.query.page = 1;
      this.goodslist = [];
      this.getData();
    },
    //面包屑方法
    setBread() {
      for (var i = 0; i <= this.cate.length - 1; i++) {
        var index = this.cate[i].children.findIndex((item) => {
          return item.id == this.$route.query.id;
        });
        if (index != -1) {
          this.breadobj.twocatename = this.cate[i].children[index].name;
          this.breadobj.onecatename = this.cate[i].name;
          this.breadobj.onecateid = this.cate[i].id;
          //this.$set(this.breadobj,"twocatename",obj.twocatename)
          break;
        }
      }
    },
    //筛选区数据
    async getAttr(id) {
      let res = await cateFilter(id);
      this.brandattr = res.result.brands; 
      //需要给brandattr在头部添加一个全部的空数据
      var obj = { id: null, name: "全部" };
      this.brandattr.unshift(obj);
      this.attr = res.result.saleProperties;
      this.attr.forEach((item) => {
        item.properties.unshift(obj);
      });
    },
    //价格排序区域
    setPriceSort() {
      this.sortField = "price";
      if (!this.sortMethod) {
        this.sortMethod = "desc";
      } else {
        this.sortMethod = this.sortMethod == "desc" ? "asc" : "desc";
      }
    },
    //获取数据
    async getData() {
      this.loading = true;
      //调用接口
      let res = await getGoods(this.query);
      if (res.result && res.result.items.length != 0) {
        this.goodslist = [...this.goodslist, ...res.result.items];
        console.log(this.goodslist);
        //加页码
        this.query.page += 1;
      } else {
        //没得到数据  以及完成
        this.finished = true;
      }
      this.loading = false;
    },
    //设置品牌
    setBrand(id) {
      //保存点击的ID
      this.brandid = id;
      //请求数据
      this.query.page = 1;
      this.query.brandId = id;
      this.goodslist = [];
      this.getData();
    },
    //设置选择的属性
    setchangeattr(key, onename, twoname, twoid) {
      var obj = { groupName: onename, propertyName: twoname, id: twoid };
      //不要这么写 视图不更新
      // this.changeattr[key]=obj
      // console.log(this.changeattr)
      //这才是正确的语法
      this.$set(this.changeattr, key, obj);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/color.scss";
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: $xtxColor;
        }
      }
    }
  }
}
.active {
  color: $xtxColor;
}
.sortview {
  background: #fff;
  margin-top: 20px;
  height: 60px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  .sortarea {
    display: flex;
    & > section {
      margin-left: 20px;
      input {
        display: none;
      }
      label {
        display: inline-block;
        width: 98px;
        height: 30px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 30px;
        color: #999;
      }
      input:checked + label {
        background: $xtxColor;
        color: #fff;
        border: none;
      }
    }
  }
  .left {
    display: flex;
    .pricearea {
      & > span {
        position: absolute;
        width: 98px;
        height: 30px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 30px;
        color: #999;
        margin-left: 20px;
        .arrow {
          position: absolute;
          border: 5px solid transparent;
          right: 8px;
          &.up {
            top: 3px;
            border-bottom-color: #bbb;
            color: red;
            &.active {
              border-bottom-color: $xtxColor;
            }
          }
          &.down {
            top: 15px;
            border-top-color: #bbb;
            &.active {
              border-top-color: $xtxColor;
            }
          }
        }
      }
    }
  }
}
.right {
  display: flex;
}
.goodsdata {
  background: #fff;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}
</style>
